<template>
    <!-- 搜索栏部分开始 -->
    <el-row style="margin-top: 10px;">
        <el-col :span="24">
            <!-- model 绑定表单数据 -->
            <el-form :inline="true" :model="order" class="demo-form-inline">
                <el-form-item label="工单编码">
                    <el-input v-model="order.woCode" placeholder="工单编码"/>
                </el-form-item>
                <el-form-item label="工单名称">
                    <el-input v-model="order.woName" placeholder="工单名称"/>
                </el-form-item>
                <el-form-item label="工单来源">
                    <el-select
                        style="width: 100px"
                        v-model="order.sourceType"
                        placeholder="工单来源"
                    >
<!--                        <el-option value="0" :selected="true" label="全部"/>-->
                        <el-option value="1" label="客户订单"/>
                        <el-option value="2" label="库存备货"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="工单类型">
                    <el-select
                        style="width: 100px"
                        v-model="order.woType"
                        placeholder="工单类型"
                    >
<!--                        <el-option value="0" :selected="true" label="全部"/>-->
                        <el-option value="1" label="自产"/>
                        <el-option value="2" label="外购"/>
                        <el-option value="3" label="外协"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="产品编号">
                    <el-input v-model="order.matId" placeholder="产品编号"/>
                </el-form-item>
                <el-form-item label="产品名称">
                    <el-input v-model="order.matName" placeholder="产品名称"/>
                </el-form-item>
                <el-form-item label="客户编码">
                    <el-input v-model="order.customerCode" placeholder="客户编码"/>
                </el-form-item>
                <el-form-item label="客户名称">
                    <el-input v-model="order.customerName" placeholder="客户名称"/>
                </el-form-item>
                <el-form-item label="需求日期">
                    <el-date-picker
                        v-model="order.requireTime"
                        type="date"
                        placeholder="请选择日期"
                        size=default
                        value-format="YYYY-MM-DD"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="loadOrder">搜索</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
    <!-- 搜索栏部分结束 -->

    <!-- 工具栏部分开始 -->
    <el-row style="margin-top: 10px;">
        <el-col :span="24">
            <el-tooltip
                class="box-item"
                effect="dark"
                content="新增工单"
                placement="top-start"
            >
                <el-button @click="toAddOrder(0)" type="primary">
                    <el-icon>
                        <Plus/>
                    </el-icon>
                </el-button>
            </el-tooltip>
            <el-button @click="editBtnHandler" :disabled="editBtnDisabled" type="primary">
                <el-icon>
                    <EditPen/>
                </el-icon>
            </el-button>
            <el-popconfirm confirm-button-text="是" cancel-button-text="否"
                           @confirm="deleteBtnHandler" title="您确定要删除选中的工单信息吗？">
                <template #reference>
                    <el-button :disabled="deleteBtnDisabled" type="primary">
                        <el-icon>
                            <Minus/>
                        </el-icon>
                    </el-button>
                </template>
            </el-popconfirm>
                        <el-button type="primary">
                            <el-icon>
                                <Upload/>
                            </el-icon>
                        </el-button>
                        <el-button @click="exportOrder" type="primary">
                            <el-icon>
                                <Download/>
                            </el-icon>
                        </el-button>
        </el-col>
    </el-row>
    <!-- 工具栏部分结束 -->
    <!-- 列表部分开始 -->
    <el-row style="margin-top: 10px;">
        <el-col :span="24">
            <el-table ref="orderTable"
                      row-key="woId"
                      @selection-change="handleSelectionChange" :data="orders" border :stripe="true"
                      style="width: 95%"
                      :table-layout="'auto'">
                <el-table-column type="selection" width="55"/>
                <el-table-column prop="woId" label="#" />
                <el-table-column prop="woCode" label="工单编码">
                    <template #default="scope">
                        <el-link @click="showOrderItem(scope.row.woId)" type="primary">
                            {{scope.row.woCode}}
                        </el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="woName" label="工单名称"/>
                <el-table-column prop="woType" label="工单类型">
                    <template #default="scope">
                        <span v-if="scope.row.woType == 1">自产</span>
                        <span v-if="scope.row.woType == 2">外购</span>
                        <span v-if="scope.row.woType == 3">外协</span>
                    </template>
                </el-table-column>
                <el-table-column prop="woSource" label="工单来源">
                    <template #default="scope">
                        <span v-if="scope.row.sourceType == 1">客户订单</span>
                        <span v-if="scope.row.sourceType == 2">库存备货</span>
                    </template>
                </el-table-column>
                <el-table-column prop="orderNum" label="订单编号"/>
                <el-table-column prop="matId" label="产品编号"/>
                <el-table-column prop="matName" label="产品名称"/>
                <el-table-column prop="matModel" label="规格型号"/>
                <el-table-column prop="matUnit" label="单位"/>
                <el-table-column prop="woQuantity" label="工单数量"/>
                <el-table-column prop="customerCode" label="客户编码"/>
                <el-table-column prop="customerName" label="客户名称"/>
                <el-table-column prop="batch" label="批次号">
                    <template #default="scope">
                        <span v-if="scope.row.batch == null">无</span>
                    </template>
                </el-table-column>
                <el-table-column prop="supplierCode" label="供应商编号"/>
                <el-table-column prop="supplierName" label="供应商名称"/>
                <el-table-column prop="requireTime" label="需求日期"/>
                <el-table-column prop="woStatus" label="单据状态">
                    <template #default="scope">
                        <span v-if="scope.row.woStatus == 1">草稿</span>
                        <span v-if="scope.row.woStatus == 2">已确认</span>
                        <span v-if="scope.row.woStatus == 3">已完成</span>
                        <span v-if="scope.row.woStatus == 4">弃用</span>
                    </template>
                </el-table-column>
                <!-- 行工具栏 -->
                <el-table-column width="160" label="操作" fixed="right">
                    <template #default="scope">

                        <el-button type="primary" @click="addSubOrder(scope.row.woId)" size="small">
                            <el-icon>
                                <Plus/>
                            </el-icon>
                        </el-button>
                        <el-button type="primary" @click="toEditOrder(scope.row.woId)" size="small">
                            <el-icon>
                                <EditPen/>
                            </el-icon>
                        </el-button>
                        <el-popconfirm confirm-button-text="是" cancel-button-text="否"
                                       @confirm="deleteOrder(scope.row.woId)" title="您确定要删除这个工单信息吗？">
                            <template #reference>
                                <el-button type="danger" size="small">
                                    <el-icon>
                                        <Minus/>
                                    </el-icon>
                                </el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>
    <!-- 列表部分结束 -->
    <!-- 分页部分开始 -->
    <el-row style="margin-top: 10px;">
        <el-col :span="24">
            <el-pagination background @change="pageChange" layout="prev, pager, next" v-bind:page-size="limit"
                           :total="total"/>
        </el-col>
    </el-row>
    <!-- 分页部分结束 -->

    <!-- 使用子组件 -->
    <OrderAddWin :visible="addOrderVisble" ref="addOrder" @optionCompleted="addOptionCompleted"/>
    <OrderEditWin :visible="editOrderVisble" :woId="editWoId" @optionCompleted="editOptionCompleted"/>
    <OrderItem :visible="orderItemVisble" :woId="editWoId" @optionCompleted="orderItemOptionCompleted"/>
</template>

<script>
// import StepItem from "@/views/pro/process/step/step-item.vue";
// import DictItem from './dict-item.vue';
// 引入api
import orderRequest from '../../../api/order.js';
import OrderAddWin from '../order/order-add-win.vue';
import OrderEditWin from '../order/order-edit-win.vue';
import OrderItem from '../order/order-item.vue';
import {ref} from 'vue'
import config from "@/util/config.js";


export default {
    components: {
        OrderAddWin,
        OrderEditWin,
        OrderItem
    },
    name: "order.vue",
    data() {
        return {
            order: {},// 绑定查询条件
            //createTimes: [],// 绑定搜索栏中的时间范围
            orders: [],// 列表数据
            currentPage: 1,// 当前页码
            limit: 5,// 每页大小
            total: 10,// 总条数
            addOrderVisble: false,// 新增工单的弹窗是否显示

            editOrderVisble: false,// 标记是否显示编辑工单的弹窗
            editWoId: -1,// 编辑工单的id

            orderItemVisble: false,// 标记是否显示工单项的弹窗
            currentOrderCode: undefined,// 当前工单的编码

            editBtnDisabled: true,
            deleteBtnDisabled: true,

        }
    }, methods: {
        /**
         * 数据导出
         */
        exportOrder() {
            // 拼接请求参数
            let url = config.proUrl + "/pro/order/export?a=1";
            // for (let o in this.orders) {
            //     if (o) {
            //         url += "&" + o + "=" + this.orders[o];
            //         if(this.orders[o].children){
            //             console.log("children:",this.orders[o].children)
            //             for (let c in this.orders[o].children){
            //                 if (c) {
            //                     url += "&" + c + "=" + this.orders[o].children[c];
            //                 }
            //             }
            //         }
            //     }
            // }
            console.log("url:",url)
            //超链接请求
            location.href = url;
        },
        /**
         * 讲requireTime转换为yyyy-mm-dd格式
         */
        formatRequireTime(utcTime) {
            const date = new Date(utcTime);
            const year = date.getFullYear();
            const month = String(date.getMonth()+1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
        },
        /**
         * 工具栏删除按钮事件
         */
        deleteBtnHandler() {
            let selectionRows = this.$refs.orderTable.getSelectionRows();
            let woIds = new Array();
            selectionRows.forEach(row => {
                woIds.push(row.woId);
            })
            orderRequest.deleteOrders(woIds,res =>{
                this.$message({
                    type: 'success',
                    message: '删除工单成功!'
                });
                this.loadOrders();
            });
        },
        /**
         * 行删除按钮事件
         * @param woId
         */
        deleteOrder(woId) {
            orderRequest.deleteOrder(woId, res => {
                this.$message({
                    type: 'success',
                    message: '删除工单成功!'
                });
                this.loadOrders();
            });
        },
        /**
         * 添加子工单
         */
        addSubOrder(woId) {
            this.$refs.addOrder.setParentId(woId);
            this.addOrderVisble = true;
        },
        /**
         * 工具栏编辑按钮事件
         */
        editBtnHandler() {
            let editOrder = this.$refs.orderTable.getSelectionRows()[0];
            if (editOrder != undefined) {
                this.editWoId = editOrder.woId;
                this.editOrderVisble = true;
            } else {
                this.$message({
                    type: 'warning',
                    message: '请选择要编辑的工单!'
                });
            }
        },
        /**
         * 表格中数据选择事件
         */
        handleSelectionChange() {
            let selectionRows = this.$refs.orderTable.getSelectionRows();
            if (selectionRows.length == 0) {
                this.editBtnDisabled = true;
                this.deleteBtnDisabled = true;
            } else if (selectionRows.length == 1) {
                this.editBtnDisabled = false;
                this.deleteBtnDisabled = false;
            } else {
                this.editBtnDisabled = true;
                this.deleteBtnDisabled = false;
            }
        },
        /**
         * 工单列表中工单编码的超链接事件
         * @param dictType
         */
        showOrderItem(woId) {
            this.editWoId = woId;
            // 弹窗
            this.orderItemVisble = true;
        },
        /**
         * 监听子组件工单项弹窗的操作是否完成
         */
        orderItemOptionCompleted() {
            // this.currentOrderCode = -1;
            this.orderItemVisble = false;
            this.loadOrders();
        },
        /**
         * 监听编辑工单的子组件操作完成的事件
         */
        editOptionCompleted() {
            // 将弹窗设置为false
            this.editOrderVisble = false;
            // 重新加载列表
            this.loadOrders();
        },
        /**
         * 行编辑按钮事件
         */
        toEditOrder(woId) {
            // 将传入的dictId设置到editDictId
            this.editWoId = woId;
            // 弹出编辑窗体
            this.editOrderVisble = true;
        },
        /**
         * 工具栏的新增工单按钮事件
         */
        toAddOrder(woId) {
            this.$refs.addOrder.setParentId(woId);
            // 弹窗 adOrderVisble设置为true
            this.addOrderVisble = true;
        },
        /**
         * 监听添加工单的子组件操作完成的事件
         */
        addOptionCompleted() {
            // 将弹窗设置为false
            this.addOrderVisble = false;
            // 重新加载列表
            this.loadOrders();
        },
        /**
         * 翻页的事件
         * @Param currentPage 最新的页码
         */
        pageChange(currentPage, pageSize) {
            // 将最新的页码赋值给this.currentPage
            this.currentPage = currentPage;
            // 重新加载数据
            this.loadOrder();
        },
        /**
         * 加载工单信息
         */
        loadOrder() {
            // 设置其他的条件
            this.order.page = this.currentPage;
            this.order.limit = this.limit;
            orderRequest.loadOrder(this.order, res => {
                //this.orders = res.data.data;
                const rowData = res.data.data;
                this.orders = rowData.map(order => ({
                    ...order,
                    requireTime: this.formatRequireTime(order.requireTime)
                }));
                this.total = res.data.total;
            })
        },
        loadOrders(){
            orderRequest.getOrderList(res=>{
                console.log("查询得到List是")
                console.log(res)
                this.orders = res.data.map(order => ({
                        ...order,
                        requireTime: this.formatRequireTime(order.requireTime)
                }));
            });

        }
    }, mounted() {
        this.loadOrders();
    }
}
</script>

<style scoped>

</style>